<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 引入jquery.js -->
		<script type="text/javascript" src="../plugins/echarts/jquery-1.9.0.min.js"></script>
		<!-- 引入 echarts.js -->
		<script type="text/javascript" src="../plugins/echarts/echarts.js"></script>
		
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="../assets/css/jquery-ui.min.css" />
		<link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css" />
		<link rel="stylesheet" href="../assets/css/ui.jqgrid.min.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
		<script src="../assets/js/ace-extra.min.js"></script>
		
		<script src="../assets/js/ace-elements.min.js"></script>
		<script src="../assets/js/ace.min.js"></script>
		<script src="../assets/js/a-my-common.js"></script>
	</head>
	<body>
		<td>&nbsp;&nbsp;<i class="ace-icon fa blue">选择时间范围：</i></td>
		<td><input id="starttimeInput" type="date" name="time"  onchange = "TimeOnclick()"></td>
		<td><i class="ace-icon fa black">至</i></td>
       	<td><input id="endtimeInput" type="date" name="time" onchange = "TimeOnclick()" > </td>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="firstPieChart" style="width: 600px;height:500px;"></div>
    
	<script type="text/javascript">
		
			    //获取系统当前时间
    			var now = new Date();
    			var seperator1 = "-";
    			var month = now.getMonth()+1;
   				var date = now.getDate();
   				//获取上周时间
   				var lastweekdate = new Date(now-7*24*3600*1000);
		     	var monthweek = lastweekdate.getMonth()+1;
		     	var dayweek = lastweekdate.getDate();
    			if (month >= 1 && month <= 9) {
       				 month = "0" + month;
    			}
    			if (date >= 0 && date <= 9) {
        			date = "0" + date;
   				}
    			if (monthweek >= 1 && monthweek <= 9) {
       				 monthweek = "0" + monthweek;
    			}
    			if (dayweek >= 0 && dayweek <= 9) {
        			dayweek = "0" + dayweek;
   				}
    			var currentdate =now.getFullYear()+ seperator1 + month + seperator1 + date;
    			var lastweekdate =lastweekdate.getFullYear()+ seperator1 + month + seperator1 + dayweek;
    			//获取相应ID
				document.getElementById("starttimeInput").value=lastweekdate;
				document.getElementById("endtimeInput").value=currentdate;
				var startTime= lastweekdate+' 00:00:00';
				var endTime=currentdate+' 23:59:59';
				loadOneColumn();
			function TimeOnclick(){
			 	 startTime = $('#starttimeInput').val()+' 00:00:00'; //获取值
			 	 endTime = $('#endtimeInput').val()+' 23:59:59'; //获取值
			 	 loadOneColumn();
		    }
			
	function loadOneColumn() {
	    var myChart = echarts.init(document.getElementById('firstPieChart'));
	    // 显示标题，图例和空的坐标轴
	    myChart.setOption({
	        color: ['#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
//	        title: {
//	            text: 'API超时次数统计',
//	            x:'center'
//	        },
	        tooltip: {
	            trigger: 'item',
	            formatter: "{a} <br/>{b} : {c} ({d}%)"
	        },        
	        legend: {
	            orient: 'vertical',
	            x: 'left',
	            data: []
	        },
	        
	        toolbox: {
	            show: true,
	            feature: {
	                mark: { show: true },
	                dataView: { show: true, readOnly: false },
	                magicType: {
	                    show: true,
	                    type: ['pie', 'funnel'],
	                    option: {
	                        funnel: {
	                            x: '25%',
	                            width: '50%',
	                            funnelAlign: 'right',
	                            max: 1548
	                        }
	                    }
	                },
	                restore: { show: true },
	                saveAsImage: { show: true }
	            }
	        },         
	        series: [{
	            name: '发布排行',
	            type: 'pie',
	            radius: '35%',
	            center: ['70%', '55%'],            
	            data: []
	          
	        }]        
	    });
	    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
	    var names = [];    //类别数组（用于存放饼图的类别）
	    var brower = [];
	    var tableName="ApiOutTime";
	    $.ajax({
	        type: 'get',
	        url :URL_TABLES+'/rapi?operFlag=queryApiMonitor&startStr='+ startTime +"&endStr=" +endTime+"&Mate_TablesName="+tableName,//请求数据的地址
	        dataType: "json",        //返回数据形式为json
	        success: function (result) {
	            //请求成功时执行该函数内容，result即为服务器返回的json对象
	            $.each(result.root, function (index, item) {
	                names.push(item.META_FLAG);    //挨个取出类别并填入类别数组 
	                brower.push({
	                    name: item.META_FLAG,
	                    value: item.flagNum
	                });
	            });
	            myChart.hideLoading();    //隐藏加载动画
	            myChart.setOption({        //加载数据图表                
	                legend: {                    
	                    data: names
	                },
	                series: [{                    
	                    data: brower
	                }]
	            });
	        },
	        error: function (errorMsg) {
	            //请求失败时执行该函数
//	            alert("图表请求数据失败!");
	            myChart.hideLoading();
	        } 
	    });
	};
	loadOneColumn();
//	setInterval(function(){
//		loadOneColumn()
//		}, 10000);
    
	</script>
	</body>
</html>
